<div class="base-attr page-content ">
	<form nz-form [formGroup]="validateForm" class="page-header">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="areaFullName">社区</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="areaFullName" />
					</nz-form-control>
				</nz-form-item>
			</div>

			<div nz-col [nzSpan]="6" [nzOffset]="12">
				<nz-form-item style="float: right;">
					<button nz-button *ngIf="authList.includes(authEnum.BASE_ADDR_VIEW)"  style="margin-right: 10px;" (click)="onSearch()">
						<i nz-icon nzType="search"></i>
						搜索
					</button>
					<button nz-button nzType="primary" *ngIf="authList.includes(authEnum.BASE_ADDR_ADD) && isQrCode" (click)="add()">
						<i nz-icon nzType="plus"></i>
						新增
					</button>
				</nz-form-item>
			</div>
		</div>

	</form>


	<nz-table #basicTable [nzData]="data" [nzBordered]="true" [nzShowPagination]="false" nzSize="middle"
		[nzScroll]="{y:  'calc(100vh - 190px)'}" [nzLoading]="nzLoading" [nzPageSize]="page.limit">
		<thead>
			<tr>
				<th nzAlign="center" nzWidth="auto">区域全称</th>
				<th nzAlign="center" nzWidth="35%">区域名称</th>
				<th nzAlign="center" nzWidth="300px">操作</th>
			</tr>
		</thead>
		<tbody>
			<ng-container *ngFor="let item  of basicTable.data;">
				<tr *ngIf="(item.parent && item.parent.expand) || !item.parent" [ngClass]="{'active': item.isSel}">
					<td style="padding-left: 40px;" [nzIndentSize]="item.level! * 24"
						[nzShowExpand]="!!item.children && editData?.id !== item.id" [(nzExpand)]="item.expand"
						[ngClass]="{'organize-edit': editData?.id === item.id}"
						(nzExpandChange)="collapse(item, $event)">
						<ng-container *ngIf="editData?.id !== item.id">
							<i nz-icon *ngIf="!item.children" nzType="file" nzTheme="outline"
								style="margin-right: 5px;"></i>
							<i nz-icon style="margin-right: 5px;" *ngIf="!!item.children"
								[nzType]="item.expand ? 'folder-open' : 'folder'" nzTheme="outline"></i>
							{{ item?.areaFullName }}
						</ng-container>
						<ng-container *ngIf="editData?.id === item.id">
							<input nz-input [(ngModel)]="editData.areaFullName" placeholder="请填写">
						</ng-container>
					</td>
					<td nzAlign="center">
						<ng-container *ngIf="editData?.id !== item.id">
							{{item.areaName}}
						</ng-container>
						<ng-container *ngIf="editData?.id === item.id">
							<input nz-input [(ngModel)]="editData.areaName" placeholder="请填写">
						</ng-container>
					</td>
					<td nzAlign="center" *ngIf="isQrCode">
						<div class="menu-btn">
							<ng-container *ngIf="editData?.id !== item.id">
								<ng-container *ngIf="authList.includes(authEnum.BASE_ADDR_EDIT)">
									<a (click)="edit(item)">编辑</a>
									<nz-divider nzType="vertical"></nz-divider>
								</ng-container>
								<ng-container *ngIf="authList.includes(authEnum.BASE_ADDR_DEL)">
									<a nz-popconfirm nzPopconfirmTitle="确定删除吗?"  (nzOnConfirm)="del(item)">删除</a>
									<nz-divider nzType="vertical" *ngIf="item.level !== 3"></nz-divider>
								</ng-container>
								<a (click)="add(item)" *ngIf="item.level !== 3 && authList.includes(authEnum.BASE_ADDR_EDIT)">添加下级部门</a>
							</ng-container>
							<ng-container *ngIf="editData?.id === item.id">
								<a (click)="save(item)">保存</a>
								<nz-divider nzType="vertical"></nz-divider>
								<a (click)="cancel(item)">取消</a>
							</ng-container>
						</div>
					</td>
					<td nzAlign="center" *ngIf="!isQrCode" >
						<a (click)="downloadQrCode(item)">下载二维码</a>
					</td>
				</tr>
				
				<tr *ngIf="item?.isSpinning">
					<td colSpan="2" style="padding: 0;">
						<ng-template #indicatorTemplate><i nz-icon nzType="loading"
								style="margin-right: 10px;"></i>加载中...</ng-template>
						<nz-spin nzSimple [nzIndicator]="indicatorTemplate" class="td-loading"></nz-spin>
					</td>
				</tr>
			</ng-container>
		</tbody>
	</nz-table>

	<div class="page-pagination">
		<span *ngIf="data?.length">共{{data?.length}}条数据</span>
		<!-- <nz-pagination [(nzPageIndex)]="page.page" [nzTotal]="page.total" nzShowQuickJumper nzShowSizeChanger
			[(nzPageSize)]="page.limit" (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="pageChange()">
		</nz-pagination> -->
	</div>

</div>